@import url(color.css);
@import url(typography.css);
@import url(components.css);
@import url(template.css);

* {
	box-sizing: border-box;
	margin: 0px;
}
a {
	text-decoration: none;
}
.material-symbols-sharp {
	font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;
}
body {
	display: flex;
	flex-direction: column;
	width: 100%;
  max-width: 2000px;
  height: auto;
	margin: auto;
	align-content: center;
	background-color: var(--color-grey-100);
}

/* Spacing variables */

:root {
  --spacing-xxxl: 64px;
  --spacing-xxl: 48px;
  --spacing-xl: 40px;
  --spacing-lg: 32px;
  --spacing-md: 24px;
  --spacing-sm: 16px;
  --spacing-xs: 12px;
  --spacing-xxs: 8px;
  --spacing-xxxs: 4px;
}
@media (max-width: 1440px) {
  :root{
    --spacing-xxxl: 56px;
    --spacing-xxl: 40px;
    --spacing-xl: 40px;
    --spacing-lg: 32px;
    --spacing-md: 24px;
    --spacing-sm: 16px;
    --spacing-xs: 12px;
    --spacing-xxs: 8px;
    --spacing-xxxs: 4px;
  }
}
@media (max-width: 1080px) {
  :root{
    --spacing-xxxl: 48px;
    --spacing-xxl: 40px;
    --spacing-xl: 32px;
    --spacing-lg: 24px;
    --spacing-md: 16px;
    --spacing-sm: 12px;
    --spacing-xs: 12px;
    --spacing-xxs: 8px;
    --spacing-xxxs: 4px;
  }
}
@media (max-width: 768px) {
  :root{
    --spacing-xxxl: 40px;
    --spacing-xxl: 32px;
    --spacing-xl: 32px;
    --spacing-lg: 24px;
    --spacing-md: 16px;
    --spacing-sm: 12px;
    --spacing-xs: 12px;
    --spacing-xxs: 8px;
    --spacing-xxxs: 4px;
  }
}
@media (max-width: 500px) {
  :root{
    --spacing-xxxl: 32px;
    --spacing-xxl: 24px;
    --spacing-xl: 16px;
    --spacing-lg: 16px;
    --spacing-md: 16px;
    --spacing-sm: 12px;
    --spacing-xs: 12px;
    --spacing-xxs: 8px;
    --spacing-xxxs: 4px;
  }
}